<template>
  <el-dialog :title="isEdit?'编辑货物':'新增货物'"
             :visible.sync="dialogForm"
             width="1100px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             :rules="rules"
             class="add-form"
             label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="货物种类"
                        prop="cargoTypeCode">
            <el-select v-model="form.cargoTypeCode"
                       placeholder="请选择"
                       @change="selectChange">
              <el-option v-for="item in selectThingsType"
                         :key="item.cargoTypeCode"
                         :label="item.cargoTypeName"
                         :value="item.cargoTypeCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table ref="singleTable"
                    :data="form.cargos"
                    border
                    highlight-current-row
                    @current-change="handleCurrentChange">
            <el-table-column label="序号"
                             min-width="50">
              <template slot-scope="scope">
                {{ scope.$index+1 }}
              </template>
            </el-table-column>
            <el-table-column label="品名"
                             min-width="100">
              <template slot-scope="scope">
                <el-select v-model="scope.row.cargoCode"
                           placeholder="请选择"
                           clearable
                           @change="getName(scope.$index)">
                  <el-option v-for="item in selectGroductName"
                             :key="item.cargoCode"
                             :label="item.cargoName"
                             :value="item.cargoCode"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="规格1"
                             min-width="100">
              <template slot-scope="scope">
                <auto-search-dic @selectName="v=>scope.row.normOne=v"
                                 :name="scope.row.normOne"
                                 code="CARGO_GGY"></auto-search-dic>
              </template>
            </el-table-column>
            <el-table-column label="规格2"
                             min-width="100">
              <template slot-scope="scope">
                <auto-search-dic @selectName="v=>scope.row.normTwo=v"
                                 :name="scope.row.normTwo"
                                 code="CARGO_GGE"></auto-search-dic>
              </template>
            </el-table-column>
            <el-table-column label="规格3"
                             min-width="100">
              <template slot-scope="scope">
                <auto-search-dic @selectName="v=>scope.row.normThree=v"
                                 :name="scope.row.normThree"
                                 code="CARGO_GGS"></auto-search-dic>
              </template>
            </el-table-column>
            <el-table-column label="材质"
                             min-width="100">
              <template slot-scope="scope">
                <auto-search-dic @selectName="v=>scope.row.material=v"
                                 :name="scope.row.material"
                                 code="CARGO_CZ"></auto-search-dic>
              </template>
            </el-table-column>
            <el-table-column label="管理方式"
                             min-width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.manageWay"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="[key, val] in _dictManagement"
                             :key="key"
                             :label="val"
                             :value="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="计量方式"
                             min-width="100">
              <template slot-scope="scope">
                <el-select v-model="scope.row.measureWay"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="[key, val] in _dictMeterStyle"
                             :key="key"
                             :label="val"
                             :value="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="生产厂家"
                             min-width="100">
              <template slot-scope="scope">
                <auto-search-dic @selectName="v=>scope.row.madeBy=v"
                                 :name="scope.row.madeBy"
                                 code="CARGO_SCZ"></auto-search-dic>
              </template>
            </el-table-column>
            <el-table-column label="是否有效"
                             min-width="100">
              <template slot-scope="scope">
                <el-select v-model="scope.row.valid"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="[key, val] in _dictTrueOrFalse"
                             :key="key"
                             :label="val"
                             :value="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="参考重量（吨/件）"
                             min-width="100">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.referenceWeight"
                          type="number"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             label="操作"
                             
                             width="120"
                             fixed="right">
              <template slot-scope="scope">
                <el-button size="small"
                           type="text"
                           @click="handleAddTable(scope.row)">复制</el-button>
                <el-button :disabled="form.cargos.length===1"
                           type="text"
                           class="danger"
                           size="small"
                           @click="handleRemove(scope.$index)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button type="primary"
                 @click="handleSubmit"
                 :loading="$store.getters.loadingBtn">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getCargoTypeList } from "@/api/baseResource/baseResource" //货物种类的下拉菜单
import { getCargoNameList } from '@/api/baseResource/baseResource' //品名的下拉菜单
import { addThings, updateThings } from '@/api/things/things'
import autoSearchDic from '@/components/autocomplete/autoSearchDic'
import { maxLength, sortLength } from '@/utils/rules'

export default {
  name: 'thingAttributeForm',
  components: { autoSearchDic },
  data() {
    return {
      form: this.clearForm(),
      rules: {
        // lineNo: [
        //   { required: true, message: '请输入专运线', trigger: 'blur' },
        //   sortLength
        // ],
        // orgId: [{ required: true, message: '请选择单位', trigger: 'change' }],
        // deptId: [{ required: true, message: '请选择部门', trigger: 'change' }]
        // remark: [maxLength]
      },
      dialogForm: false,
      isEdit: false,
      maxLot: 0,
      selectThingsType:[],
      selectGoodsType: [],
      selectGroductName: []
    }
  },
  mounted() {
    getCargoTypeList().then(res => {
      this.selectThingsType = res.data.aaData
    })
    getCargoNameList().then(res => {
      this.selectGoodsType = res.data.aaData
    })
  },
  methods: {
    clearForm() {
      return {
        id: null,
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.cargoName,
        cargoTypeCode: '',
        cargoTypeName: '',
        cargos: [
          {
            sortNo: 1,
            cargoName: '',
            cargoCode: '',
            normOne: '',
            normTwo: '',
            normThree: '',
            normStr: '',
            material: '',
            madeBy: '',
            manageWay: '',
            manageWayDesc: '',
            valid: false,
            referenceWeight: 0,
            remark: null
          }
        ]
      }
    },
    selectChange(val) {
      // 获取货物name
      if (this.form.cargoTypeCode === val) {
        this.form.cargoTypeName = val
      }
      // 品名
      this.selectGroductName = []
      for (let i = 0; i < this.selectGoodsType.length; i++) {
        if (this.selectGoodsType[i].cargoTypeCode === this.form.cargoTypeCode) {
          let obj = new Object()
          obj.cargoCode = this.selectGoodsType[i].cargoCode
          obj.cargoName = this.selectGoodsType[i].cargoName
          this.selectGroductName.push(obj)
        }
      }
    },
    handleAddTable(item) {
      let params = { ...item }
      params.sortNo = this.form.cargos.length + 1
      this.form.cargos.push(params)
    },
    handleRemove(index) {
      if (this.form.cargos.length === 1) {
        this.$message({ message: '至少需要一条数据!', type: 'error' })
      } else {
        this.form.cargos.splice(index, 1)
      }
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    // 保存
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isEdit ? this.handleToEdit() : this.handleToAdd()
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    },
    // 新增
    handleToAdd() {
      addThings(this.form).then(res => {
        this.$message({ message: '新增成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    //获取id
    getId(val) {
      this.form.id = val
    },
    // 编辑
    handleToEdit() {
      updateThings(this.form.id, this.form).then(res => {
        this.$message({ message: '编辑成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    // 获取货物的name
    getName(index) {
      this.selectGroductName.forEach(element => {
        if (this.form.cargos[index].cargoCode === element.cargoCode) {
          this.form.cargos[index].cargoName = element.cargoName
        }
      })
    }
    // handleRemove(index){
    //     this.form.specialTransportLineMachine.splice(index,1)
    // },
    // getLineInfo(item){
    //     if(item){
    //         this.form.lineNo=item.resourceNo
    //         this.form.lineId=item.id
    //         this.maxLot=item.maxParkingNum
    //     }else{
    //         this.form.lineNo=''
    //         this.form.lineId=''
    //         this.maxLot=0
    //         this.form=this.clearForm()
    //     }
    // },
    // handleCopy(item){
    //     this.form.specialTransportLineMachine.push({
    //             machineName:'',
    //             priority:'',
    //             machineId:'',
    //             startParkingLot:'',
    //             endParkingLot:'',
    //             valid:true,
    //             remark:'',
    //         })
    // },
    // handleCover(index){
    //     this.form.specialTransportLineMachine[index].startParkingLot = 1
    //     this.form.specialTransportLineMachine[index].endParkingLot = this.maxLot
    // }
  },
  watch: {
    dialogForm(bool) {
      if (!bool) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
        this.$emit('clear')
      }
    }
  }
}
</script>

<style scoped>
</style>
